<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* linear 匀速 */
            /*animation: an1 2s linear;*/

            /* steps 分步动画 */
            /*animation: an1 2s steps(3);*/

            /* 如果有两个时间，第一个是动画时间，第二个是延迟时间 */
            /*animation: an1 2s 3s;*/

            /* 重复次数  infinite代表无线次数*/
            /*animation: an1 2s 3;*/
            animation: an1 2s infinite;

            /* alternate 反向 */
            /*animation: an1 2s infinite alternate;*/

            /* 动画执行完毕时的状态，forwards：结束时的状态 ， backwards：开始时的状态 */
            /*animation: an1 2s forwards;*/
            /*animation: an1 2s backwards;*/
        }
        .box:hover {
            /* 这个不是符合属性，时分开写的，值为paused代表暂停，通常配合鼠标移动上去使用 */
            animation-play-state: paused;
        }


        /* 动画一：宽度从200变化到800 */
        @keyframes an1 {
            from {
                width: 200px;
            }
            to {
                width: 800px;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
